<template>
    <div>
        <button class="layui-btn" @click="addChannel()">增加渠道</button>
        <br>
        <table class="layui-table schedule-table-data">
            <thead>
                <tr><th>编号</th><th>渠道名称</th><th>每日发布量</th><th>单个耗费产能</th><th>操作</th></tr> 
            </thead>
            <tbody>
                <tr v-for="(item, index) in channelList" :id="item.id">
                    <td>{{index + 1}}</td>
                    <td>{{item.channelName}}</td>
                    <td>{{item.channelTotal}}</td>
                    <td>{{item.channelCostUnit}}</td>
                    <td class="layui-text"><a href="javascript:;" @click="updateChannel(item.id, item.channelName, item.channelTotal, item.channelCostUnit)">修改</a>&nbsp;&nbsp;<a href="javascript:;" @click="delChannel(item.id)">删除</a></td>                    
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    export default{
        name: 'channel',
        data: function () {
            return {
                channelList: [],
            }
        },
        methods: {
            getChannelList: function(callback){
                var me = this;
                axios.post('/channel/list').then(function(res){
                    var data = res.data;
                    if(data.success){
                        me.channelList = data.data;
                        callback && callback();
                    }else{
                        layer.msg(res.errorMsg, {icon: 2, time: 1000});
                    }
                })
            },
            addChannel: function(params){
                var me = this;
                var addLayer = me.layui_layer.open({
                    title: params ? '修改渠道' : '新建渠道',
                    type:1,
                    area: ['580px', '300px'],
                    anim: 5,
                    shadeClose: false, //点击遮罩关闭
                    content: [
                        '<form action="" class="layui-form" style="padding:25px 0 0; overflow:hidden;">',
                            '<div class="layui-form-item">',
                                '<label><span class="layui-form-label" style="width:100px">渠道名称：</span><div class="layui-input-inline"><input name="channelName" class="layui-input" type="text" value="'+ ((params && params.channelName) || '') +'"></div></label>',
                            '</div>',
                            '<div class="layui-form-item">',
                                '<label><span class="layui-form-label" style="width:100px">每日可发布量：</span><div class="layui-input-inline"><input name="channelTotal" class="layui-input" type="text" value="'+ ((params && params.channelTotal) || '') +'"></div></label>',
                                '<span>请输入整数数字</span>',
                            '</div>',
                            '<div class="layui-form-item">',
                                '<label><span class="layui-form-label" style="width:100px">单篇耗费产能：</span><div class="layui-input-inline"><input name="channelCostUnit" class="layui-input" type="text" value="'+ ((params && params.channelCostUnit) || '') +'"></div></label>',
                                '<span style="width:240px;display:inline-block;">输入整数，如可以以“一篇头条“或则一个有好货，耗费工时为1个单元</span>',
                            '</div>',
                            '<div class="layui-form-item">',
                                '<label><span class="layui-form-label" style="width:100px"></span><button class="layui-btn" lay-submit="" lay-filter="addChannel">提交</button></label>',
                            '</div>',
                        '</form>'
                    ].join(''),
                    success: function(layero, index){
                        me.layui_form.on('submit(addChannel)', function(data){
                            if(!data.field.channelName){
                                layer.msg('渠道名称不能为空', {icon: 2, time: 1000});
                            }else{
                                if(params){
                                    URL = '/channel/edit';
                                    data.field.id = params.channelId;
                                }else{
                                    URL = '/channel/add';
                                }

                                
                                axios.post(URL, data.field).then(function(res){
                                    me.getChannelList(function(){
                                        layer.close(layer.index);
                                    });
                                }).catch(function(err){});
                            }
                            return false;
                        });
                    }
                });
            },
            updateChannel: function(channelId, channelName, channelTotal, channelCostUnit){
                this.addChannel({
                    channelId: channelId,
                    channelName: channelName,
                    channelTotal: channelTotal,
                    channelCostUnit: channelCostUnit
                });
            },
            delChannel: function(channelId){
                var me = this;
                layer.confirm('确定删除渠道', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    axios.post('/channel/del', {id: channelId}).then(function(){
                        me.getChannelList(function(){
                            layer.msg('删除成功', {icon: 1, time: 2000});
                        });
                    })
                }, function(){});
            }
        },
        mounted: function(){
            var me = this;
            layui.use(['form', 'layer'], function(){
                me.layui_form = layui.form;
                me.layui_layer = layui.layer;
            });
            me.getChannelList();
        }
    }
</script>
<style>
</style>
